<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>流水账后台系统管理</title>
<link rel="stylesheet" type="text/css" href="/static/plugins/layui/css/layui.css">
<link rel="stylesheet" type="text/css" href="/static/css/account/accountList.css">
<style type="text/css">
.layui-layout-admin .layui-header {
    background-color: rgb(255, 255, 255);
}
.layui-header-top{
	position: relative;
    width: 100%;
    text-align: center;
}
.layui-header-top h2{
    line-height: 60px;
}
.layui-form-item .layui-input-inline {
    float: left;
    width: 190px;
    margin-top: 10px;
    color: crimson;
}
.layui-layer-dialog {
    min-width: 1000px;
}
</style>
</head>
<body class="layui-layout-body">
	<input type="hidden" id="payCode" th:value="${dayBook.payCode}">
	<div class="layui-layout layui-layout-admin">
		<div class="layui-header">
			<div class="layui-logo" style="background: #23262E;">流水账后台系统管理</div>
			<div class="layui-header-top">
				<h2 class="title">支出信息详情单</h2>
			</div>
		</div>
		<!-- header nav部分 -->
		<div th:insert="~{/common/common :: copy}"></div>
		<div class="layui-body">
			<div style="margin-top: -15px;">
				<div class="layui-fluid layui-from-consider">
					<div class="layui-tab">
						<ul class="layui-tab-title">
							<li class="layui-this">基本操作</li>
							<li>操作记录</li>
						</ul>
						<div class="layui-tab-content">
							<div class="layui-tab-item layui-show">
								<button type="button" class="layui-btn layui-btn-normal" id="edit">修改</button>
								<div class="edit-account" style="display: none;">
									<form class="layui-form">
										<table class="layui-table" id="dayBookTable">
											<thead>
												<tr>
													<th>支付类型</th>
													<th>支付金额(单位:元)</th>
													<th>描述</th>
													<th>备注</th>
													<th>操作</th>
												</tr> 
											</thead>
											<tbody>
												<tr th:each="dayBook,typeStat:${dayBooks}">
													<td>
														<input type="hidden" value="1" th:attr="id='isActive'+${dayBook.pkid},name='isActive['+${typeStat.index}+']'">
														<input type="hidden" th:attr="id='pkid'+${dayBook.pkid}" th:value="${dayBook.pkid}">
														<span th:text="${dayBook.typeName}"></span>
													</td>
													<td>
														<input type="text" th:value="${dayBook.payMoney}" th:attr="name='payMoney[' + ${typeStat.index} + ']',id='payMoney'+${typeStat.index}" autocomplete="off" class="layui-input" onchange="valiteNumber(this)">
													</td>
													<td>
														<div class="expressDiv" th:if="${dayBook.typeCode eq 'KDF'}">
															<input type="hidden" th:value="${dayBook.expressCode}" name="expressCodeInput"/>
															<select name="expressCode" id="expressCode" class="" lay-verify="" lay-search></select> 
														</div>
														<div class="expressDiv" th:if="${dayBook.typeCode ne 'KDF'}">
															<input type="text" th:value="${dayBook.description}" th:attr="name='description[' + ${typeStat.index} + ']',id='description' + ${typeStat.index}" autocomplete="off" class="layui-input" style="width: 100%;">
														</div>
													</td>
													<td>
														<input type="text" th:value="${dayBook.remake}" th:attr="id='remake' + ${typeStat.index},name='remake[' + ${typeStat.index} + ']'"  placeholder="备注" autocomplete="off" class="layui-input" style="width: 100%;">
													</td>
													<td>
														<a class="layui-btn layui-btn-xs" id="del" th:attr="onclick='del(' + ${dayBook.pkid} + ')'">
															<i class="layui-icon layui-icon-delete"></i>删除
														</a>
													</td>
												</tr>
												<tr>
													<td colspan="5">
														<div style="text-align: center;">
															<button class="layui-btn" id="updateSave">确认</button>
														</div>
													</td>
												</tr>
											</tbody>
										</table>	
									</form>
								</div>
							</div>
							<div class="layui-tab-item">
								操作记录
							</div>
						</div>
					</div>
				</div>
				<div class="layui-fluid layui-from-consider">
					<div class="layui-row">
						<h2 class="title">基本数据</h2>
						<div class="layui-row layui-col-space10">
							<div class="layui-col-md3">
								<div class="layui-form-item">
								    <label class="layui-form-label">支出编号</label>
									<div class="layui-input-inline">
										<span th:text="${dayBook.payCode}"></span>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="layui-row">
						<div class="layui-row layui-col-space10">
							<div class="layui-col-md3">
								<div class="layui-form-item">
								    <label class="layui-form-label">支出日期</label>
									<div class="layui-input-inline">
										<span th:text="${#dates.format(dayBook.payTime, 'yyyy-MM-dd')}"></span>
									</div>
								</div>
							</div>
							<div class="layui-col-md3">
								<div class="layui-form-item">
								    <label class="layui-form-label">支出姓名</label>
									<div class="layui-input-inline"><span th:text="${session.userSession.realName}"></span></div>
								</div>
							</div>
							<div class="layui-col-md3">
								<div class="layui-form-item">
								    <label class="layui-form-label">支出总金额</label>
									<div class="layui-input-inline">
										<span th:text="${dayBook.sumPayMoney}"></span>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="layui-row" th:each="dayBook,typeStat:${dayBooks}">
						<div class="layui-col-md3">
							<div class="layui-form-item">
							    <label class="layui-form-label">支出类型</label>
								<div class="layui-input-inline">
									<span th:text="${dayBook.typeName}"></span>
								</div>
							</div>
						</div>
						<div class="layui-col-md3">
							<div class="layui-form-item">
							    <label class="layui-form-label">支出金额</label>
								<div class="layui-input-inline">
									<span th:text="${dayBook.payMoney}"></span>
								</div>
							</div>
						</div>
						<div class="layui-col-md3">
							<div class="layui-form-item">
							    <label class="layui-form-label">描述</label>
								<div class="layui-input-inline">
									<span th:text="${dayBook.description}"></span>
								</div>
							</div>
						</div>
						<div class="layui-col-md3">
							<div class="layui-form-item">
							    <label class="layui-form-label">备注</label>
								<div class="layui-input-inline">
									<span th:text="${dayBook.remake}"></span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="/static/js/jquery-3.5.1.min.js"></script>
	<script type="text/javascript" src="/static/plugins/layui/layui.all.js"></script>
	<script type="text/javascript" src="/static/js/common/common.js"></script>
	<script type="text/javascript" src="/static/js/account/accountDetail.js"></script>
</body>
</body>
</html>
